<template>
    <div class="item flex-row bg-white">
       <el-image
        :src="$store.getters.imgUrl + itemData.CASE_LOGO"
        fit="cover">
            <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
            </div>
        </el-image>
        <div class="content">
            <p class="title" @click="goDetail(itemData.UIDS)">{{itemData.CASE_NAME}}</p>
            <p class="desc">{{itemData.CASE_DESC}}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ListItem',
    props: {
       itemData: {
           type: Object,
           default() {
               return {}
           }
       } 
    },
    data() {
        return {
            
        }
    },
    methods: {
        goDetail(id) {
            this.$router.push({name: 'caseDetail', params: {id: id}})
        }
    }
}
</script>

<style lang="scss">
    .item {
        padding: 20px 30px;
        border-bottom: 1px solid #eee;
        .el-image {
            width: 210px; 
            height: 118px;
            vertical-align: middle;
        }
        .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            color: #909399;
            font-size: 30px;
        }
        .content {
            flex: 1;
             line-height: 24px;
             padding: 10px 0 10px 20px;
            .title {
                font-size: 18px;
                font-weight: bold;
                color: #333333;
                cursor: pointer;
            }
            .desc {
                font-weight: 400;
                color: #666666;
                margin-top: 20px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
    }
</style>